<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title>我要发布</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn  flat small color="white" @click="publish">
                发布
            </v-btn>
        </v-toolbar>
        <v-layout row wrap>
            <v-flex xs12>
                <v-container>
                    <h3 class="primary--text" style="margin-left:10px">#{{topic_title}}</h3>
                    <v-textarea class="myTextArea" outline auto-grow placeholder='此时此刻,想和大家分享些什么'></v-textarea>
                </v-container>
                <v-card style="" color="secondary lighten-5" dark tile flat>
                    <v-layout row wrap>
                        <v-flex style="margin-left:10px" xs1>
                            <v-icon>panorama</v-icon>
                        </v-flex>
                        <v-flex>
                            <span>
                                添加照片 #{{topic_title}}<br/>
                                图片(选填``````)
                            </span>
                        </v-flex>
                    </v-layout>
                </v-card>
                <v-layout row wrap style="margin-top:20px">
                    <v-flex text-xs-center xs3 v-for="(value,index) in imgs" :key=index>
                        <v-icon style="position:absolute;" @click="deleteImg(index)">delete_outline</v-icon>
                        <img style="height:65px;width:65px" :src=value>
                    </v-flex>
                    <v-flex xs3>
                        <div style="background:#eeeeee; height:65px;width:65px;margin:auto" @click="selectImg">
                            <v-icon large style="position:relative;top:23%;left:24%" >add</v-icon>
                        </div>
                    </v-flex>
                    <input type="file" style="display:none" ref='file' @change="selectFile">
                </v-layout>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
export default {
    data(){
        return{
            topic_title:this.$route.params.contact,
            imgs:[require('../../assets/avatar.jpg')]
        }
    },
    methods:{
        publish(){

        },
        selectImg(){
            var input=this.$refs['file']
            input.click()
            var file=input.value
        },
        selectFile(){
            var input=this.$refs['file']
            var file=input.files[0]
            var reader=new FileReader()
            var src=''
            reader.readAsDataURL(file)
            this.imgs.push(require('../../assets/'+file.name))
        },
        deleteImg(index){
            this.imgs.splice(index)
        }
    }
}
</script>

<style scoped>
    .myTextArea>>> .v-input__control .v-input__slot{
        border:none
    }
</style>